<script setup lang="ts">
const cart = useCartStore();
</script>

<template>
  <div class="cart-list">
    <div class="item" v-for="item in cart.items" :key="item.id">
      <div class="img-wrap">
        <img :src="item.image_url" :alt="item.name" />
      </div>
      <div class="info-wrap">
        <router-link :to="`/products/${item.id}`" class="name">{{ item.name }}</router-link>
        <SvgIcon class="remove" name="icon-cancel" @click="cart.removeItem(item.id)"></SvgIcon>
        <div class="price-wrap">
          <span class="price">{{ item.price.toFixed(2) }}</span>
          <Counter v-model:count="item.count"></Counter>
        </div>
      </div>
    </div>
  </div>
  <BackTopButton></BackTopButton>
</template>

<style lang="scss" scoped>
.cart-list {
  margin: 10rem;
  height: 60vh;
  overflow-y: auto;

  .item {
    display: flex;
    padding: 20rem;

    &:not(:last-child) {
      border-bottom: 1px solid var(--border-color);
    }

    .img-wrap {
      width: 80rem;
      margin-right: 10rem;
      border-radius: 10px;
      overflow: hidden;
    }

    .info-wrap {
      flex: auto;
      display: flex;
      flex-direction: column;
      justify-content: space-around;
      position: relative;

      .name {
        font-size: 16rem;
        margin: 0;
      }

      .price-wrap {
        display: flex;
        justify-content: space-between;
        align-items: center;

        .price {
          font-size: 12rem;

          &::before {
            content: '￥';
          }
        }
      }

      .remove {
        position: absolute;
        top: 0;
        right: 0;
        font-size: 16rem;
      }
    }
  }
}
</style>
